<template>
 
		<TnPopup v-model="showPopup"  open-direction="bottom"   height="800" >
		
			  <view  style="border: 0px solid red; width:100%; height:220px; padding: 0px 20px; "  > 
			  <view  style="border: 0px solid red; font-size:20px; width:100%; height:20%; display: flex; justify-content: left; align-items: center; "  >
			  <b> 充值 </b>
			  </view>
			  
			  
			  <view  style=" border: 0px solid red;   width:100%; height:80%;  "  >
				  <view  style="border: 0px solid red;  width:100%; height:50%; display: flex; justify-content: center; align-items: center; "  >
				  <view  style="border: 0px solid red;  width:50%;  height:100%; display: flex; justify-content: center; align-items: center; "  >
				  <view  class="amountview" :style="{ backgroundColor: bgColor1 }" @click="amountClick(1)" >
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: center; "  >
				  测算 {{myArray1.countnum}}  次
				  </view>
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: flex-start; "  >
				  <span style="margin-top: 5px;">¥</span> 
				  <b style="font-size:20px" > {{myArray1.amount}}  </b>
				  </view>
				  </view>
				  </view>
				  
				  <view  style="border: 0px solid red;  width:50%;  height:100%; display: flex; justify-content: center; align-items: center; "  >
				  <view  class="amountview" :style="{ backgroundColor: bgColor2 }" @click="amountClick(2)" >
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: center; "  >
				  测算 {{myArray2.countnum}} 次
				  </view>
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: flex-start; "  >
				  <span style="margin-top: 5px;">¥</span> 
				  <b style="font-size:20px" >{{myArray2.amount}}</b>
				  </view>
				  </view>
				  </view>
				  </view>
		 
				  
				  <view  style="border: 0px solid red; margin-top: 10px; width:100%;  padding: 0px;  height:50%; display: flex; justify-content: center; align-items: center; "  >
				  <view  style="border: 0px solid red;  width:50%;  height:100%; display: flex; justify-content: center; align-items: center; "  >
				  <view  class="amountview" :style="{ backgroundColor: bgColor3 }" @click="amountClick(3)" >
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: center; "  >
				  测算{{myArray3.countnum}}次
				  </view>
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: flex-start; "  >
				  <span style="margin-top: 5px;">¥</span> 
				  <b style="font-size:20px" > {{myArray3.amount}} </b>
				  </view>
				  </view>
				  </view>
				  
				  <view  style="border: 0px solid red;  width:50%;  height:100%; display: flex; justify-content: center; align-items: center; "  >
				  <view  class="amountview" :style="{ backgroundColor: bgColor4 }" @click="amountClick(4)" >
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: center; "  >
				  测算 {{myArray4.countnum}} 次
				  </view>
				  <view  style="border: 0px solid red; width:100%;  height:50%; display: flex; justify-content: center; align-items: flex-start; "  >
				  <span style="margin-top: 5px;">¥</span> 
				  <b style="font-size:20px" > {{myArray4.amount}} </b>
				  </view>
				  </view>
				  </view>
				  </view>
		 
			  </view>
			  
			  
			  </view>
			  
			  <view  style="margin-top: 10px;  width:100%; height:70px; display: flex; justify-content: center; align-items: center; "  >
			   <TnButton bg-color="tn-blue"  size="xl" width="50%" height="40px" font-size="30px" @click="amountSubmit()" >立即充值</TnButton>
			  </view>
		</TnPopup>
 
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, reactive, defineEmits } from 'vue'
	import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import { payAmount, getPayConfig, wxPayAmount } from '@/api/trade'

	//绑定父类接口
	const emit = defineEmits(['callParentMethod'])
	const callParentMethod = () => {
		emit('callParentMethod')
	}

	const myArray1 = ref({countnum:0,amount:0});
	const myArray2 = ref({countnum:0,amount:0});
	const myArray3 = ref({countnum:0,amount:0});
	const myArray4 = ref({countnum:0,amount:0});
	
	const init = () => {
		getPayConfig().then(res => {
			console.log( "-------------------------" )
			console.log( res )
			for (let item of res.data) {
			  console.log( item )
			}
			myArray1.value = res.data[0]
			myArray2.value = res.data[1]
			myArray3.value = res.data[2]
			myArray4.value = res.data[3]
			/*
			for (let item of res.data) {
			  console.log( item )
			  myArray.push(item)
			}*/
		}).catch(error => {
			uni.showToast({
			  icon:  'error',
			  title: "充值配置加载失败",
				duration: 2000 // 持续时间为3000毫秒，即3秒
			})
		})
	}
	init()
	onLoad((options) => {
		console.log( "===========chongzhi=============start" )
		
	});
	


 
	const showPopup = ref(false)
	const handleClick = () => {
		/*
		uni.navigateTo({
			url:'/pages/my/my'
		});*/
 	
		showPopup.value = true
	}


 const amount = ref(1)
 const bgColor1 =ref('#FBF7F4')
 const bgColor2 =ref('#EAEEF7')
 const bgColor3 =ref('#EAEEF7')
 const bgColor4 =ref('#EAEEF7')
 const amountClick = ( type ) => {
 	amount.value = type
 	if(type==1){
 		bgColor1.value ='#FBF7F4'
 	}else{
 		bgColor1.value ='#EAEEF7'
 	}
 	if(type==2){
 		bgColor2.value ='#FBF7F4'
 	}else{
 		bgColor2.value ='#EAEEF7'
 	}
 	if(type==3){
 		bgColor3.value ='#FBF7F4'
 	}else{
 		bgColor3.value ='#EAEEF7'
 	}
 	if(type==4){
 		bgColor4.value ='#FBF7F4'
 	}else{
 		bgColor4.value ='#EAEEF7'
 	}
 }
 
 
 const amountSubmit = () => {

 	payAmount(amount.value).then(res => {
	uni.requestPayment({
		"provider": "wxpay",  //固定值为"wxpay"
		"appid":     res.data.appid,  // 应用ID（AppID）
		"partnerid": res.data.partnerid,      // 商户号（PartnerID）
		"package":   res.data.ppackage,        // 固定值
		"nonceStr":  res.data.nonceStr, // 随机字符串
		"paySign":   res.data.paySign,
		"timeStamp": res.data.timeStamp,
		"signType":  res.data.signType,   //签名类型，默认为RSA，仅支持RSA。

		success: function (res) {
		        //var rawdata = JSON.parse(res.rawdata);
		        console.log("支付成功");
				showPopup.value = false
				callParentMethod()
				
				uni.showToast({
				  icon: 'success',
				  title: "充值成功",
					duration: 3000 // 持续时间为3000毫秒，即3秒
				})
		},
		fail: function (err) {
		        console.log('支付失败:' + JSON.stringify(err)  );
				uni.showToast({
				  icon: 'error',
				  title: "支付失败",
					duration: 3000 // 持续时间为3000毫秒，即3秒
				})
		}
	});


	}).catch(error => {
		uni.showToast({
		  icon: 'error',
		  title: "充值失败",
			duration: 2000 // 持续时间为3000毫秒，即3秒
		})
	})
	
	
 }
 
 
 const childMethod = () => {
   console.log('Child method called');
   showPopup.value = true
 };
  
 defineExpose({
   childMethod
 });
 
 
 
 
 
</script>


<style>
	
 

.content {
	border: 0px solid red;
}

.amountview{
 border: 0px solid red;  width:95%;  border-radius: 20rpx; background-color: #EAEEF7; height:100%; display: block; 

}

.btn{
position: absolute; /* 设置为 absolute 进行绝对定位 */
border: 0px solid red;
width: 100%;
height: 80px;
display: flex; 
justify-content: center; 
align-items: center;
}
</style>
